<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义console</title>
<style type="text/css">
border








:








1
px




 




solid




 




#CCC








;
color








:








#333








;
padding








:








0
px




 




5
px








;
min-height








:








24
px






;
line-height








:








24
px






;
margin-bottom








:








-1
px






;
}
border








:








1
px




 




solid




 




#CCC








;
color








:








#333








;
padding








:








0
px




 




5
px








;
min-height








:








24
px






;
line-height








:








24
px






;
margin-bottom








:








-1
px






;
background








:




 




url








("
data








:image
/png;base64
,
iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAEEklEQVQ4jbWUW0wcZRTH
/998szO7O8ByWa7WmBVKE1EpjUCt1hZsk1pCqsFL6mufauJDTQypTYHY2KbGmChp
+
mBsfDBtNFJDArWVWlAJsqxpKYGYsiJpKVso2y3sZXZnZ2aPDyNkl23Vl05ykvnO5Tdn
/ufMMCLCo7iER0IFIP5Xgru2LS8ai9cRUQUAMMYCOYrjWvB6T/jf6tjDpHBubKkxnRVH3ZUNLU9W1
+
Q48koAAPHwXfw1PRUNzoz1czVwTPX3T
/0v8MHD3ezL7356L
+
+
ZN05sbd5nKylQ4LAxKLIVj2pATCPcW1ExOtirhye
+
PXzg9Zc
/PX3i3QxQhhQ9F37BmfM/Hyva
+
cGRF7c
+
hzKXgMqi7G4IDH5ZgbPlLduvhVWfnDn
/cf6u7bVH2/a
+
9
OCO5cqWfXL9oe937GxiJXkcjxdY
/hc8QO1j1v3A8HX4qRYAsBgB5pdTGBq8TJrvs9e0mf7eVdbaVmxo2C
+
xsvqT1VuaWNzgcDmASMKyW4srGPV6Mer1YnLiKsIaENYAhwRwLqC6romxsvqTGxr2S1lSLN1b3iY9v3tTocKRNIG7EUAWAS4AE0EXZLHRGl5lI0JhIGEATglgAApzOGye3ZuWfvNuAzCUASZR2eMo3wzOATKBuWWrSOLAO9uBV5
+
18
r745jK
+
XtllHWJWjkMS4CjfDE1U9mSBmdPtkR1OMALs67Y7lTZvMuJZcUaA7HCCOd2eLClWAZwDEsssFNO
+
TwbAYcuMm5T58Ewp1OCsFlcBUmCX1iWlgxlgXweOaYAWV0FqcHbVt1bCjNhFbWEcIdUqTDfOMzteHw
+
pgLYwDmbELmaBi4vyR
/TZgRs3QwQi63VXLb1jgWXGiICbIYI
+
O3CjuCh
/JAt8e
+
xckhZ87cv
+
KzQxb22DXbQskdAQCNxBIHAH4XB4zS9xYGIeWPZfIVrwtd8eO5fM0hgAzna397596PPjM
/aCIyLfgh1VgI0DQ37Chd91qxO5CTk2QDeB4T
+
BmT
+
uQr92
+
qOz3e296Sze1dW1dnhq4xMIBBYHfZe
+
ioRUNM0aldwp21CUKyI
/3wUl1wUm5WImCPw4GcctX4
+
evHqq
/UBb0/H3D76ZMdCH/zar9j5tOis6eEXjK7bimhxHnhsAEA8HoS9NRc2A9weuBj6cGjg16fF4surZyMgIOjs7
+
fT0tBiJRKRkMimZpimlUikbEdnI5iogu7uOBLEcAFjKWGCJpXGmh0OMMV0QBF0QhKQkSUlFUZIej0fv6OgwRV3XoaoqDMNgpmkKRLRqHIBI2v0EtPs
+
BvB
/ts0kwABjIoAUEaWISDBNUzAMg6mqyqLR6IOl6OvrY8PDw5ibm2OhUIipqopEIsEAwG63kyzLcLvdVFpaSs3NzWhtbc2C/A18nMDdJnOGEAAAAABJRU5ErkJggg==")




 




no-repeat




 




scroll




 




0
1
px




 




#EBF5FF








;
padding-left








:








30
px






;
}
border








:








1
px




 




solid




 




#CCC








;
color








:








#333








;
padding








:








0
px




 




5
px








;
min-height








:








24
px






;
line-height








:








24
px






;
margin-bottom








:








-1
px






;
background








:




 




url








("
data








:image
/png;base64
,
iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAD
/ElEQVQ4jbWUX2gcVRSHv3tndmaTTbJJSJNWaXVNCUVjFbEWlb4U9aEYjRYURHwqKIIvgqX0oZEi
+
CIqCBYUjVhE8aW0xAfxSQhpSaVqETWpDdhtbWvS
/NvZ2dm5c
+
/
xIUmTdlN86oUDw71zvnvu7xx
+
SkS4HUvfFirg3
/Lk/Lcw9tp2l9lBE8ujzrBBaWK/iT
+
8
UI
+
osPMHXpxKbpWu1pNCjnZtsXH6fm2xddAWd3iqow
/d3I5YgyxegpnThHpqMiiq/Xpw/DjFvv8Huy86dtTn7PF6ftem4P7nULkmCAso7YEIklQQEbLyGeT8V66wITmsd75zWPe/IbcE2
+
HOu
+
vz2UlT3LMx2PYEKNAB5LY9gy50YzPDX99
/wF1dnYgFO3cR
+
8
sRCj3J6
/6
+
hSNrwdebZ0
+
/
rbI4
+
yjV
/RuD3p34YUTYHhG2RmhtlyQCrF4gbI8IWiP89iJ667Mkc7yXfdp597pgd
+
bDHWkU7An6dhG2V8nlI7SLwEQgdjUjq6GyCE9HhMUq4ebN2KC32Rq7f31wJnspbtX5DQpNFbI1IW4NOAZTBVNFZVVyzTFBaTs2YTD9vDdY
+
e36uNlUHg96N6OJwdzU4pWKRcAmS5etNAkIu1upTbVsktpsCZi4AYx4PX5b01JFN6
/lPZPW0GYeFq
+
CqYDS0HQH2m9BtxaRuNrdCFYkykVgwkZwMg1AdWGa5sppCL3Vs2oZOh5A6wznqDdIgbMTMjvRT2cJ1HKiOMiqpJdHubLQxJW
/f2Nr3uMGJxCBhQmkNmsEf6oBLKK
+
swvX9nragBcCArYOOLzFYdpqn9EGtBVyDQ9yaYKrmfH8yz
/ONFas88eyhdq7fmtzz2o9CvDwtjxNe74bcZbs3FG0tzolApi5CGc5onseXMWtfBTevDpvU4bS6XmcFcBbjd5XYPsB7H1vce4K1/dFPGwlwszXxlTxnm/WvuIGd/P7Bj4xEyceVurffbliEZVvQSnFzO8nuFw/ibMZTRoEjZgUV52nfq1eFpd7oeXVn
+
1
aVoMJVYaf1HJp
/HCuRQ4EbdpTuTx4wdJoIeAyxCTY2JAuMm5dsLd4cObizbqva5vTF/5EDz/2kO9lB3PNPOWFtC6bGzbFmhpnTaI
+
nsmVvgxeOpaWSqUGhhobG2NoaMibnJz0K5VKkKZpYK0NnHM5Eck9cqdqf
/5e3d/RpLpqRuo//ePOfX1WLljBKKWM1tpordMgCNJCoZCWSiVz6NAh6xtjiOOYLMuUtVaLyEp4gH
+
qbOunyvbX5Y4pwAK
+
UkoAJyJORLS1VmdZpuI4VlEUrS
/FyMiIGh0dpVwuq9nZWRXHMUmSKIB8Pi9hGNLV1SU9PT2ye/duBgYGGiD/AVNZApv23zD/AAAAAElFTkSuQmCC")




 




no-repeat




 




scroll 0 1px  #FFFFC8;
padding-left:30 px;}
border








:








1
px




 




solid




 




#CCC








;
color








:








#FF0000








;
padding








:








0
px




 




5
px








;
min-height








:








24
px






;
line-height








:








24
px






;
margin-bottom








:








-1
px






;
background








:




 




url








("
data








:image
/png;base64
,
iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAACYQAAAmEBwTBV
+
gAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAQHSURBVDiNtZVtbxRVFMd
/596ZnS1L210otMB2t62gmKA2gVLtC5UgaGi0Eg2JfgY
+
AdAWWq0fgKJGE33ZqCQF5EFqCIoJ0RoTXpRATHjY0hYa2i6d7XZ2u7tzfbHttlgKiYn
/5M5N7j33N
+
fMOfeMGGP4P2Q9yyCxSloUxBAioCKIyviW1R9
/5N152jlZyeORkOwz6A5VVdWsa2uxamOAonB/hPzoCH4yOahE922acHsxJv9M8L2QbETbp/SmaNOqtv1Yz20BgeJD5ichf
+
c23oWzFMbHB4IZ82HVw4epFcET66R8Nu9cKdv9diNbnsefm6Ns46YSbCk4OzmF0gpz
+
xaZ3369ZgK6tfbm8NgCSy2
+
QixPVp8MNr
/WmF
+
zlqnECNlwFVODg
/gpF991i3PKJTV0HXdiisnbCfIVYZztOxoV1qmlHpfAo9Xhg1a8fm
+
hJorrptnyzbfE2ttRL71C8q9r
+
KkUJpVi5ubfeNqm4Xgvm7
/6GncySWFdNToWbxp5
+
YV9y8DGtj
+
26
hvw3WnKtr6ICgYBiB1pR2
/fwaOh68zcukUmVM7mE58jWqMch
+
DWrRSmXaxYHB1wOh4DJ
+
pq6iUcaUIUAccmd
+
ki944dLYUV6zyKtfNVsmvWsfmLL0HrYqK7jpH
/7RecUBkoBRWVzWMtO1tgvo4tJ7BftMafngbbYnWkEvfsGRKFAvGu7iK8qxt8vwgAhjs7mLv0MxWxKH46Db6PaI2xVAy4WrwglhM0
+
Rz5sVEktAoVClERqcQ908
/dQoG6T3vm4ytC7x4
+
TG7gAhXRDZjZWUw2g8lmAUE5gUjJYyydFKVAFORy
+
G6qCMnlyD94AIVCKfxiQgwmmynaLZSiZYEojKhFsAScZNFAFY2UYnY6hX5zNw3He0ueLqiup4eEVqR
+
PEV5TTUoQUQWwJnFqrDVMHYAbBuxbdKpNNa
+
d2noPbEY
/qFD3D18qASPd39CsO0DZianEMsGuziU2P2w5Obdf6Pld5Q0Z9Oz8NY71PV8VoIk2o
+
QPXcGEJzW94h3dy
/udXTA1Ss4kTCIDNZ839/8WB2LY3dh20gwSObGDXzPm89
+
J9mfzlFRG6UiFiU7cJ7ho50A
+
J6Hd30IFQwiWiNK9ZV4S3vFg9Y9g4hqyqZm8Naup2zbNuYuXqA8uuGx7z8zeh979x68oSHK0i7BcCVgBqrHk61cvpxfBp5o27uxoALnjEjjnOdh8gWcSBj5V
/IAMo
+
mUZZFYHUIkGvay71edfp0qcMta5sTbW3lBUefRMneZbQn608t
+
fer
+
k6PLV18cqPftcsar15zEOEjDDtXAP5hjHTVfHfy
/JM2V/yDLGj8wIF6Uf5
+
IyYoRpIGPymih9f3
/XD1aeeeCf6v
+
gfLYZXwkd5f2QAAAABJRU5ErkJggg








==")
no-repeat




 




scroll




 




0
1
px




 




#FFEBEB








;
padding-left








:








30
px






;
}
margin-top








:








20
px






;
font-size








:








16
px






;
font-weight








:bolder








;
}
color








:green








;
}
</style>
<script type="text/javascript"> 
var console={ 
assert:function(){ 
}, 
clear:function(){ 
}, 
count:function(){ 
}, 
debug:function(){ 
}, 
dir:function(){ 
}, 
dirxml:function(){ 
}, 
error:function(){ 
var args=Array.prototype.slice.call(arguments); 
consoleHelper.showerror(args.join(" ")); 
}, 
exception:function(){ 
}, 
group:function(name){ 
consoleHelper.showgroup(name); 
}, 
groupCollapsed:function(){ 
}, 
groupEnd:function(){ 
}, 
info:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showinfo("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showinfo(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showinfo(args[0]); 
} 
} 
else{ 
consoleHelper.showinfo(args.join(" ")); 
} 
}, 
log:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length>1){ 
var i=1,hasstyle=false; 
if(args[0].indexOf("%c")==0){ 
args[0]=args[0].replace(/%c/,""); 
i=2; 
hasstyle=true; 
} 
for(;i<args.length;i++){ 
if(/%s|%d|%i|%o/.test(args[0])) { 
args[0]=args[0].replace(/%s|%d|%i|%o/,args[i]); 
} 
else{ 
break; 
} 
} 
if(i<args.length){ 
args[0]=args[0]+" "+args.slice(i).join(" "); 
} 
if(hasstyle){ 
consoleHelper.showlog(args[0],args[1]); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showlog("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showlog(args[0],null,"console_log_function"); 
} 
else{ 
consoleHelper.showlog(args[0]); 
} 
} 
else{ 
consoleHelper.showlog(""); 
} 
}, 
memoryProfile:function(){ 
}, 
memoryProfileEnd:function(){ 
}, 
profile:function(){ 
}, 
profileEnd:function(){ 
}, 
table:function(){ 
}, 
time:function(){ 
}, 
timeEnd:function(){ 
}, 
timeStamp:function(){ 
}, 
trace:function(){ 
}, 
warn:function(){ 
var args=Array.prototype.slice.call(arguments); 
if(args.length==1){ 
if(arguments[0] instanceof Array){ 
consoleHelper.showwarn("["+args[0]+"]"); 
} 
else if(arguments[0] instanceof Function){ 
consoleHelper.showwarn(args[0],"console_log_function"); 
} 
else{ 
consoleHelper.showwarn(args[0]); 
} 
} 
else{ 
consoleHelper.showwarn(args.join(" ")); 
} 
} 
}; 
var consoleHelper={ 
showlog:function(val,style,cla){ 
if(cla){ 
cla="console_log "+cla; 
} 
else{ 
cla="console_log"; 
} 
this.show(val,style,cla); 
}, 
showinfo:function(val,cla){ 
if(cla){ 
cla="console_info "+cla; 
} 
else{ 
cla="console_info"; 
} 
this.show(val,null,cla); 
}, 
showwarn:function(val,cla){ 
if(cla){ 
cla="console_warn "+cla; 
} 
else{ 
cla="console_warn"; 
} 
this.show(val,null,cla); 
}, 
showerror:function(val){ 
this.show(val,null,"console_error"); 
}, 
showgroup:function(val){ 
if(!val){ 
val=""; 
} 
this.show(val+":",null,"console_group"); 
}, 
show:function(val,style,cla){ 
if(document.getElementById("showconsole")){ 
var div=document.createElement("div"); 
if(div.setAttribute){ 
if(style){ 
div.setAttribute("style",style); 
} 
} 
else{ 
if(style){ 
div=document.createElement("<div style="+style+">"); 
} 
} 
if(cla){ 
div.className=cla; 
} 
var oText=document.createTextNode(val); 
div.appendChild(oText); 
document.getElementById("showconsole").appendChild(div); 
} 
} 
}; 
window.onload=function(){ 
console.group("log"); 
console.log('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.log("The %%s jumped over %d tall buildings",1, "abc",1); 
console.log("I am %s and I have:", "abc", "bcd","cde"); 
console.log("abc",1); 
console.log([1,2,3,4,5]); 
console.log(); 
console.log(test); 
console.group("info"); 
('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
("The %%s jumped over %d tall buildings",1, "abc",1); 
("I am %s and I have:", "abc", "bcd","cde"); 
("abc",1); 
([1,2,3,4,5]); 
(); 
(test); 
console.group("warn"); 
console.warn('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.warn("The %%s jumped over %d tall buildings",1, "abc",1); 
console.warn("I am %s and I have:", "abc", "bcd","cde"); 
console.warn("abc",1); 
console.warn([1,2,3,4,5]); 
console.warn(); 
console.warn(test); 
console.group("error"); 
console.error('%c a %s This is red text on a green background','color:red; background-color:#EEE'); 
console.error("The %%s jumped over %d tall buildings",1, "abc",1); 
console.error("I am %s and I have:", "abc", "bcd","cde"); 
console.error("abc",1); 
console.error([1,2,3,4,5]); 
console.error(test); 
} 
function test(){ 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc"); 
alert("abc");alert("abc"); 
} 
</script>
</head>
<body>
	<h1>自定义console()</h1>
	<div id="showconsole"></div>
</body>
</html>
